<template>
  <div class="floor-wrapper clearfix">
    <h1 class="floor-title">{{floor.categoryName}}</h1>
    <div class="floor-banner" @click="linkTo">
      <img :src="banner.imgUrl" width="100%" height="100%">
    </div>
    <ul class="self-product-list">
      <li class="self-product-item" v-for="(item, index) in productList" :key="index">
        <router-link class="self-product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
          <img :src="item.productCover" class="self-product-img">
          <div class="self-product-info">
            <div class="sell">
              <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
              <span class="sell-price">
                <em>¥</em>
                <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                <span v-else>?</span>
                <i class="sell-type">/{{item.attributeName}}</i>
              </span>
              <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
            </div>
            <div class="name">{{item.name}}</div>
            <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
            <div class="discounts clearfix" v-if="item.activity">
              <div class="tag-group" v-if="item.activity.isMore === '1'">
                <span class="tag" v-for="(tag, index1) in item.activity.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
              </div>
              <div class="tag-group" v-else>
                <span class="tag">{{item.activity.activityName}}</span>
              </div>
            </div>
            <div class="keywords">
              <span v-if="item.k1" class="w1">{{item.k1}}</span>
              <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
              <span v-if="item.k3" class="w3">{{item.k3}}</span>
            </div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    floor: {
      type: Object
    }
  },
  data () {
    return {
      banner: {},
      productList: []
    }
  },
  beforeMount () {
    this.formatData()
  },
  methods: {
    // 解析floor对象
    formatData () {
      if (!this.floor.bannerList || !this.floor.bannerList.length) {
        return false
      }
      for (let i = 0; i < this.floor.bannerList.length; i++) {
        const banner = this.floor.bannerList[i]
        Object.assign(this.banner, JSON.parse(banner.param))
      }
      this.floor.productList.forEach(item => {
        if (item.keyWords) {
          let arr = item.keyWords.split(',')
          item.k1 = arr[0] || ''
          item.k2 = arr[1] || ''
          item.k3 = arr[2] || ''
        }
      })
      this.productList = this.floor.productList
    },
    // 点击banner跳转
    linkTo () {
      let categoryList = JSON.parse(window.localStorage.getItem('categoryList'))
      switch (this.banner.bannerType) {
        case 1: // 店铺
          this.$router.push({
            path: '/store/storeInfo',
            query: {
              storeId: this.banner.storeId,
              brandId: this.banner.storeBrandId
            }
          })
          break
        case 2: // 分类
          let attrArr = this.banner.productCategoryAttribute.split(',')
          let sname = ''
          categoryList.forEach(cate => {
            if (cate.categoryId === this.banner.categoryId) {
              cate.categoryAttribute.forEach(attr => {
                if (attr.parentAttribute.attributeId === Number(attrArr[0])) {
                  attr.sonAttribute.forEach(sAttr => {
                    if (sAttr.attributeId === Number(attrArr[1])) {
                      sname = sAttr.value
                    }
                  })
                }
              })
            }
          })
          let attrParams = {
            cateId: this.banner.categoryId,
            attrs: [
              {
                pAttrId: attrArr[0],
                sonAttr: {
                  attrId: attrArr[1],
                  attrName: sname
                }
              }
            ]
          }
          window.localStorage.setItem('goodsParams', JSON.stringify(attrParams))
          this.$router.push('/goods/goodsList')
          break
        case 3: // 品牌
          let bname = ''
          categoryList.forEach(cate => {
            if (cate.categoryId === this.banner.categoryId) {
              cate.categoryBrands.forEach(brand => {
                if (brand.brandId === Number(this.banner.brandId)) {
                  bname = brand.brandName
                }
              })
            }
          })
          let brandParams = {
            cateId: this.banner.categoryId,
            brands: [
              {
                brandId: this.banner.brandId,
                brandName: bname
              }
            ]
          }
          window.localStorage.setItem('goodsParams', JSON.stringify(brandParams))
          this.$router.push('/goods/goodsList')
          break
        case 4: // 商品
          this.$router.push({
            path: '/goods/goodsDetail',
            query: {
              productId: this.banner.productId
            }
          })
          break
        case 5: // 活动
          this.$router.push({
            path: '/activity',
            query: {
              activeId: this.banner.activityId
            }
          })
          break
        case 6: // 自定义链接
          window.open(this.banner.customUrl)
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.floor-wrapper {
  margin: auto;
  padding: 15px 0;
  width: 1200px;
  height: 822px;
  .floor-title {
    margin-bottom: 18px;
    padding-left: 10px;
    height: 24px;
    line-height: 24px;
    font-size: 24px;
    color: #333333;
    font-weight: normal;
    border-left: solid 4px $green;
  }
  .floor-banner {
    float: left;
    width: 225px;
    height: 750px;
  }
  .self-product-list {
    float: left;
    margin-left: 10px;
    width: 965px;
    height: 750px;
    .self-product-box {
      position: relative;
      text-decoration: none;
    }
    .self-product-item {
      float: left;
      margin: 0 5px 10px;
      width: 231px;
      max-width: 300px;
      height: 370px;
      background: #ffffff;
      transform: translate(0, 0);
      transition: all 0.2s;
      &:hover {
        transform: translate(0, -5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }
      .self-product-box {
        position: relative;
        display: block;
      }
      .self-product-img {
        margin: 0 5px;
        width: 221px;
        height: 221px;
      }
      .self-product-info {
        padding: 0 20px 19px;
        .sell {
          margin: 4px 0 0;
          font-size: 0;
          height: 23px;
          overflow: hidden;
          .discount {
            display: inline-block;
            vertical-align: middle;
            padding: 0 13px 0 5px;
            height: 23px;
            line-height: 23px;
            font-size: $fz_16;
            color: #ffffff;
            background: right center url('../../assets/images/discount-bg.png') no-repeat;
          }
          .sell-price {
            margin-left: 6px;
            vertical-align: middle;
            display: inline-block;
            font-size: $fz_16;
            color: $red;
            em {
              vertical-align: text-bottom;
              font-size: $fz_12;
              font-style: normal;
            }
            .sell-type {
              vertical-align: text-bottom;
              font-size: $fz_14;
              font-style: normal;
              color: $f_sub;
            }
          }
          .orignal-price {
            display: inline-block;
            vertical-align: middle;
            margin-left: 6px;
            font-size: $fz_14;
            color: $f_sub;
          }
        }
        .name {
          margin-top: 5px;
          height: 36px;
          font-size: $fz_14;
          line-height: 18px;
          color: $f_main;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2;
          &:hover {
            color: $red;
          }
        }
        .discounts {
          padding-top: 5px;
          .tag-group {
            padding-top: 5px;
            font-size: 0;
            .tag {
              display: inline-block;
              margin-right: 5px;
              font-size: $fz_14;
              color: $red;
              padding: 4px;
              border: solid 1px $red;
              border-radius: 4px;
              max-width: 100%;
              white-space: nowrap;
              text-overflow:ellipsis;
              overflow: hidden;
              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
        .keywords {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 221px;
          text-align: center;
          .w1 {
            position: absolute;
            top: 0;
            left: 15px;
            padding: 8px 10px;
            width: 52px;
            height: 61px;
            background: url(../../assets/images/w1.png);
            font-size: 16px;
            color: #ffffff;
          }
          .w2 {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 94px;
            height: 74px;
            background: url(../../assets/images/w2.png);
            overflow: hidden;
            .text {
              width: 150px;
              display: block;
              padding: 4px 0;
              text-align: center;
              color: #fff;
              font-style: normal;
              transform: translate(-13px, 35px) rotate(-39deg);
              border: solid 1px #ffffff;
            }
          }
          .w3 {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 13px;
            width: 60px;
            height: 60px;
            font-size: 16px;
            color: #ffffff;
            background: #ff3b30;
            border-radius: 50%;
          }
        }
        .store {
          clear: both;
          display: block;
          float: left;
          margin: 5px 0 0;
          padding: 0 6px;
          max-width: 100%;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow: hidden;
          font-size: $fz_14;
          height: 24px;
          line-height: 24px;
          color: #7f5543;
          background: #e8e4de;
          border: solid 1px #ddd2c2;
          border-radius: 2px;
        }
        .pro-grade-name {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
